<template>
  <view class="mxp-swiper-indicator">
    <view v-if="indicatorMode === 'line'" class="line-bar-box wrapper" :style="{ height: lineHeight, width: wrapperWidth, background: indicatorInactiveColor }">
      <view class="line-bar-click-box" :style="{ height: lineHeight, width: wrapperWidth }">
        <view
          v-for="(_item, index) in length"
          :key="index"
          class="line-bar-click"
          :style="{ height: lineHeight, width: lineWidth }"
          @click="onCutClick(index)"
        ></view>
      </view>
      <view class="line-bar" :style="[lineStyle]"></view>
    </view>
    <view v-if="indicatorMode === 'dot'" key="view-2" class="wrapper">
      <view
        v-for="(_item, index) in length"
        :key="index"
        class="line-dot"
        :class="[index === current ? 'active' : '']"
        :style="{ backgroundColor: index === current ? indicatorActiveColor : indicatorInactiveColor }"
        @click="onCutClick(index)"
      ></view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { type CSSProperties, type PropType, computed, ref } from 'vue';

  import type { $AllColorStr } from '@/mxp-ui/mxp-tool/types/interface';
  defineOptions({
    name: 'mxp-swiper-indicator',
  });

  const props = defineProps({
    /** 轮播的长度 */
    length: { type: Number, required: true },
    /** 当前处于活动状态的轮播的索引 */
    current: { type: Number, required: true },
    /** 指示器非激活颜色 */
    indicatorActiveColor: { type: String as PropType<$AllColorStr>, required: true },
    /** 指示器的激活颜色 */
    indicatorInactiveColor: { type: String as PropType<$AllColorStr>, required: true },
    /** 指示器模式，line-线型，dot-点型 */
    indicatorMode: { type: String as PropType<'dot' | 'line'>, required: true },
  });
  const emits = defineEmits<{
    (e: 'indicatorClick', val: number): void;
  }>();

  const lineWidth = ref('22px');
  const lineHeight = ref('4px');
  const wrapperWidth = computed(() => `calc(${lineWidth.value} * ${props.length})`);

  /** 指示器为线型的样式 */
  const lineStyle = computed<CSSProperties>(() => {
    return {
      width: lineWidth.value,
      height: lineHeight.value,
      transform: `translateX(calc(${lineWidth.value} * ${props.current}))`,
      background: props.indicatorActiveColor,
    };
  });

  /**
   * 点击 指示器
   */
  function onCutClick(index: number) {
    emits('indicatorClick', index);
  }
</script>

<style lang="scss" scoped>
  .mxp-swiper-indicator .wrapper {
    position: relative;
    display: flex;

    &.line-bar-box {
      height: 4px;

      .line-bar-click-box {
        position: absolute;
        z-index: 2;
        display: flex;
        height: 4px;

        .line-bar-click {
          width: 22px;
          height: 4px;
        }
      }

      .line-bar {
        position: absolute;
        z-index: 1;
        width: 22px;
        height: 4px;
        background-color: #ffffff;
        border-radius: 100px;
        transition: transform 0.3s;
      }
    }

    .line-dot {
      width: 6px;
      height: 6px;
      margin: 0 4px;
      border-radius: 100px;

      &.active {
        width: 12px;
      }
    }
  }
</style>
